
<template>
    <div class="page-container">
      <div v-for="application in applications" :key="application.title" class="block">
        <div class="columnTitle">{{ application.title }}</div>
        <div class="row">
          <div class="label">启用/禁用</div>
          <div class="content">
            <el-switch v-model="application.enabled" active-color="#13ce66" inactive-color="#ff4949">
              <template #active>启用</template>
              <template #inactive>禁用</template>
            </el-switch>
          </div>
        </div>
        <div class="row">
          <div class="label">可申请的资产分类</div>
          <div class="content">
            <div class="selectClassify">
              <div class="box">
                <div class="inputBox">
                  <div class="tags" v-for="tag in application.tags" :key="tag">
                    <span class="tag">
                      <span class="txt">{{ tag.name }}</span>
                      <i class="removeTag el-icon-error" @click="removeTag(tag)"></i>
                    </span>
                    <span class="tagTotal">+ {{ tag.count }}</span>
                  </div>
                </div>
                <button class="choseBtn" @click="selectCategory(application)">选择</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="label">申请方式</div>
          <div class="content">
            <el-checkbox-group v-model="application.methods">
              <el-checkbox label="资产分类"></el-checkbox>
              <el-checkbox label="资产"></el-checkbox>
              <el-checkbox label="描述"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="submit">
  <el-button type="primary" size="small" @click="saveApplication(application)">保存</el-button>
</div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElSwitch, ElCheckboxGroup, ElCheckbox, ElButton } from 'element-plus';
  
  export default {
    components: {
      ElSwitch,
      ElCheckboxGroup,
      ElCheckbox,
      ElButton
    },
    setup() {
      const applications = ref([
        {
          title: '申请领用资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
        {
          title: '申请借用资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
        {
          title: '申请退还资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
        {
          title: '申请领用资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
        {
          title: '申请报失资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
        {
          title: '交接资产',
          enabled: true,
          tags: [
            { name: '计算机和网络设备', count: 35 }
          ],
          methods: ['资产分类', '资产', '描述']
        },
   
      ]);
  
      function removeTag(tag) {
    
      }
  
      function selectCategory(application) {
        
      }
  
      function saveApplication(application) {
     
      }

      return {
        applications,
        removeTag,
        selectCategory,
        saveApplication
      };
    }
  };
  </script>
  
  <style scoped>
  .page-container {
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
    padding: 20px;
  }
  
  .block {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 10px;
  }
  .choseBtn{
    float: right;
  }
  .columnTitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .label {
    width: 150px;
    text-align: right;
    margin-right: 10px;
    font-size: 13px;
    

  }
  .box{
    width: 100%;
  }
  .content {
    flex-grow: 1;
  }
  
  .selectClassify .box {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
  }
  
  .tags .tag {
    margin-right: 5px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px 10px;
    display: inline-block;
  }
  
  .tags .removeTag {
    cursor: pointer;
  }
  .block{
    width: 48%;
  }
  .choseBtn {
    margin-top: 10px;
  }
  
  .submit {
    text-align: right;
  }
  </style>